<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <style>
        .test{
            position: absolute;
        }
    </style>
    <div class="output">
        <button onclick="begin()">开始语音识别</button>
        <button onclick="end()">结束语音识别</button>
    </div>
    <script>
        // var grammar = '#JSGF V1.0; grammar colors; public <color> = aqua | azure | beige | bisque | black | blue | brown | chocolate | coral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;'
        // var recognition = new SpeechRecognition();
        // var speechRecognitionList = new SpeechGrammarList();
        // speechRecognitionList.addFromString(grammar, 1);
        // recognition.grammars = speechRecognitionList;
        // //recognition.continuous = false;
        // recognition.lang = 'en-US';
        // recognition.interimResults = false;
        // recognition.maxAlternatives = 1;

        // var diagnostic = document.querySelector('.output');
        // var bg = document.querySelector('html');

        // document.body.onclick = function () {
        //     recognition.start();
        //     console.log('Ready to receive a color command.');
        // }

        // recognition.onresult = function (event) {
        //     console.log(event)
        //     var color = event.results[0][0].transcript;
        //     diagnostic.textContent = 'Result received: ' + color;
        //     bg.style.backgroundColor = color;
        // }
    //     const tempNode = document.createElement('div')
    //     tempNode.innerHTML=    `<div class="output" style="position: absolute;bottom:40%">
    //     <button onclick="begin()">开始语音识别</button>
    //     <button onclick="end()">结束语音识别</button>
    // </div>`
    //       document.body.appendChild(tempNode)
        let text = ""
        const speechRecognition = new webkitSpeechRecognition()

        function begin() {
            speechRecognition.onresult = function (event) {
                var results = event.results
                console.log(results)
                if (results.length > 0) {
                    for (var i = 0; i < results.length; i++) {
                        text = results[i][0].transcript
                        const utterance1 = new SpeechSynthesisUtterance(text)
                        
                        window.speechSynthesis.speak(utterance1)
                        console.log(text)
                        // document.querySelector("textarea").innerHTML = text
                        // document.querySelector("#__next > div.overflow-hidden.w-full.h-full.relative > div.flex.h-full.flex-1.flex-col.md\:pl-\[260px\] > main > div.absolute.bottom-0.left-0.w-full.border-t.md\:border-t-0.dark\:border-white\/20.md\:border-transparent.md\:dark\:border-transparent.md\:bg-vert-light-gradient.bg-white.dark\:bg-gray-800.md\:\!bg-transparent.dark\:md\:bg-vert-dark-gradient > form > div > div.flex.flex-col.w-full.py-2.flex-grow.md\:py-3.md\:pl-4.relative.border.border-black\/10.bg-white.dark\:border-gray-900\/50.dark\:text-white.dark\:bg-gray-700.rounded-md.shadow-\[0_0_10px_rgba\(0\,0\,0\,0\.10\)\].dark\:shadow-\[0_0_15px_rgba\(0\,0\,0\,0\.10\)\] > button")
                    }
                }
            }
            speechRecognition.continuous = true
            speechRecognition.start()
        }
        function end() {
            speechRecognition.stop()
            setTimeout(() => { text }, 3000)
            console.log(text)
        }





    </script>
</body>

</html>